<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy</title>
</head>
<body>
    <script>
        const obj1 = {
            name: '之豪'
        }
        const obj2 = {}
        // 给obj2扩展一个name属性
        Object.defineProperty(obj2,'name',{
            // 数据代理，获取值使用get属性
            get(){
                console.log('get');
                return obj1['name'];
            },
            // 数据劫持，响应式处理
            set(value){
                console.log('set');
                obj1.name = value;
            }
        })
        console.log(obj2.name); // get '之豪'
        // 修改属性是可以响应的
        console.log(obj2.name = '花无缺'); // set 花无缺
        console.log(obj1.name); // 花无缺
        // 新增属性时没有挨个属性绑定的话失去响应式
        console.log(obj2.age = 22); // 22
        console.log(obj1); // {name: '花无缺'}
    </script>
</body>
</html>